<template>
	<view class="checkin-section" :class="[config.style]">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view class="checkin-header">
			<template v-if="today.checkin">
				<view class="btn-checkin active">今日已签</view>
			</template>
			<template v-else>
				<view class="btn-checkin" @click="checkin()">签到</view>
			</template>
			
			<view class="con">
				已连续签到<text>{{today.con}}</text>天
			</view>
			<view class="total">
				<view class="item">
					总签：<text>{{today.total}}</text>
				</view>
				<view class="item">
					积分：<text>{{userInfo.memberInfo.credit1}}</text>
				</view>
			</view>
		</view>
		
		<view class="day-box">
			<view class="item" v-for="(item,index) in day" :key="index">
				<view class="box" :class="item.checkin?'active':''">
					<view class="day">第<text>{{item.day}}</text>天</view>
					<template v-if="item.checkin">
						<view class="checkin" >
							<image src="../../../static/images/score1.png" /></image>
						</view>
					</template>
					
					<template v-else>
						<view class="checkin">
							<image src="../../../static/images/score0.png"></image>
						</view>
					</template>
					
					<view class="score">+{{item.score}}</view>
				</view>
			</view>
		</view>
		
		<view class="readme">
			<view class="title">签到规则</view>
			<view class="text">
				<view class="item">1. 每天完成一次签到可获得积分奖励；</view>
				<view class="item">2. 连续签到在3天、5天、7天可获得积分加成；</view>
				<view class="item">3. 连续签到中断，将从第一天重新开始计算；</view>
				<view class="item">4. 积分计分周期为7天。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		components: {
			
		},
		data() {
			return {
				loading: true, //加载中
				userInfo: {},
				today: {},
				day: [],
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			Promise.all([
				this.getToday(), // 今日签到数据
				this.getDay(), // 获取签到日期
			]).then(res => {
				//加载完成
				this.loading = false
			})
		},
		created() {
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 刷新用户信息
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				let data = {}
					data.action = 'user_info'
					
				//获取用户数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res.data.data)
							//console.log(res.data.data.length)
							if(res.data.data){
								userInfo.memberInfo = res.data.data
								console.log(userInfo)
								uni.setStorageSync('userInfo', userInfo)
								that.userInfo = userInfo
							}
							//结束下拉刷新
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			/**
			 * 获取今日签到数据
			 */
			getToday: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'today'
					
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/checkin'
					//#endif
					//#ifdef H5
					url = 'entry/site/checkin'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								//console.log(res.data.data)
								that.today = res.data.data
							}
							resolve(res.data)
						},
						fail: function(){
							reject(res.data)
						}
					})
				})
				
			},
			/**
			 * 获取今日签到数据
			 */
			getDay: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'day'
					
				//获取首页数据
				return new Promise((resolve, reject) => {
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/checkin'
						//#endif
						//#ifdef H5
						url = 'entry/site/checkin'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								//console.log(res.data.data)
								that.day = res.data.data
							}
							resolve(res.data)
						},
						fail: function(){
							reject(res.data)
						}
					})
				})
				
			},
			
			checkin: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'checkin'
					
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/checkin'
					//#endif
					//#ifdef H5
					url = 'entry/site/checkin'
					//#endif
				this.util.request({
					url : url,
					data : data,
					method: 'POST',
					success: function (res) {
						if (res.data.code == 200) {
							console.log(res.data.data)
							that.getDay()
							that.getToday()
							that.getUserInfo()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.checkin-section {
		.checkin-header {
			padding: 40rpx;
			color: #fff;
			text-align: center;
	
			.btn-checkin {
				border: 16rpx solid rgba(255,255,255,.5);
				border-radius:50%;
				width: 100px;
				height: 100px;
				line-height: 100px;
				background-color: #fff;
				margin: 0 auto;
			}
			.btn-checkin.active {
				background-color: rgba(255,255,255,.6);
			}
	
			.con {
				font-size: 28rpx;
				padding: 20rpx;
			}
	
			.total {
				font-size: 28rpx;
				.item {
					width:40%;
					display: inline-block;
					border-right: 2rpx solid #eee;
				}
				.item:last-child {
					border-right: 0px;
				}
			}
		}
		
		.day-box {
			background: #fff;
			padding: 60rpx;
			display:-webkit-flex;
			display:flex;
			flex-wrap: wrap;
			font-size: 28rpx;
			.item {
				box-sizing: border-box;
				flex: 0 0 25%;
				
				.box {
					border-radius: 10rpx;
					margin: 10rpx;
					border: 4rpx solid #eee;
					text-align: center;
					background: #f2f2f2;
					color: #ccc;
	
					
					.day {
						margin-top: 20rpx;
					}
					.checkin {
	
						image {
							width: 72rpx;
							height: 72rpx;
						}
					}
				}
				.box.active {
					background: #FFFAF0;
					border: 4rpx solid #FFCC99;
					color: #CC9966;
				}
			}
	
			.item:last-child {
				flex: 50%;
			}
		}
		
		.readme {
			padding: 0 20rpx;
	
			.title {
				text-align: center;
				margin: 20rpx auto;
				font-weight: 600;
			}
			.item {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.checkin-section.Green {
		.checkin-header {
			  background-color: $Green;
			  .btn-checkin {
				  color: $Green;
			  }
		}
	}
	.checkin-section.Blue {
		.checkin-header {
			background-color: $Blue;
			.btn-checkin {
				color: $Blue;
			}
		}
	}
	.checkin-section.LightRed {
		.checkin-header {
			background-color: $LightRed;
			.btn-checkin {
				color: $LightRed;
			}
		}
	}
	.checkin-section.Orange {
		.checkin-header {
			  background-color: $Orange;
			  .btn-checkin {
				color: $Orange;
			}
	  	}
	}
	.checkin-section.LightPink {
		.checkin-header {
			background-color: $LightPink;
			.btn-checkin {
				color: $LightPink;
			}
		}
	}
	.checkin-section.Magenta {
		.checkin-header {
			background-color: $Magenta;
			.btn-checkin {
				color: $Magenta;
			}
		}
	}

</style>
